
<script setup lang="ts" type="module">
import {
  ref,
  onMounted,
  watch,
  reactive,
  onUpdated,
  toRefs,
  toRef,
  Ref,
  defineProps,
} from "vue";
import { useRouter, RouterView } from "vue-router";
import { ElMessage, FormInstance, FormRules } from "element-plus";
import { register, getCode } from "@/apis/http";
import Upload from "@/components/upload.vue";
import Videos from "@/components/video.vue";
const formSize = ref("default");
const ruleFormRef = ref<FormInstance>();
const time = ref(60);
const flag = ref(false);
const disclaimerAgreement = ref(false);
const router = useRouter();
const formatDataImg = ref(["jpeg", "jpg", "png", "gif"]);
// const ruleForm = reactive({
//   username: "",
//   password: "",
//   password4Check: "",
//   enterprisename: "",
//   unifynum: "",
//   email: "123@163.com",
//   legalname: "",
//   papelsnum: "",
//   auctioneer: "",
//   auctioneerManageNum: "",
//   auctioneerIdNum: "",
//   tel: "",
//   verificationCode: "",
//   licenseimg: "",
//   papelsupimg: "",
//   papelsdownimg: "",
//   businessLicenseCertificate: "",
//   auctioneerQualificationCertificate: "",
// });
const ruleForm: any = ref({
  auctioneer: "",
  auctioneerIdNum: "",
  auctioneerManageNum: "",
  auctioneerQualificationCertificate: "",
  businessLicenseCertificate: "",
  email: "",
  enterprisename: "",
  enterprisenameen: "",
  legalname: "",
  licenseimg: "",
  papelsdownimg: "",
  papelsnum: "",
  papelsupimg: "",
  password: "",
  password4Check: "",
  tel: "",
  unifynum: "",
  username: "",
  verificationCode: "",
  type:1
});
const validateMessage = (rule: any, value: any, callback: any) => {
  if (!ruleForm.value.papelsupimg) {
    callback(new Error("请输入身份证正面"));
  } else if (!ruleForm.value.papelsdownimg) {
    callback(new Error("请输入身份证反面"));
  } else {
    callback();
  }
};
const validateMessage2 = (rule: any, value: any, callback: any) => {
  var reg = /^[a-zA-Z][0-9a-zA-Z]{7,15}$/;
  if (!value) {
    callback(new Error("请再次输入密码"));
  } else if (ruleForm.value.password != ruleForm.value.password4Check) {
    callback(new Error("两次输入密码不一致!"));
  } else if (!reg.test(ruleForm.value.password4Check)) {
    callback(new Error("格式不正确!"));
  } else {
    callback();
  }
};
const rules = reactive<FormRules>({
  username: [
    { required: true, message: "请输入用户名称", trigger: "blur" },
    {
      pattern: /^[a-zA-Z][0-9a-zA-Z]{7,15}$/,
      message: "8~16位，字母开头，只允许数字和英文",
      trigger: "blur",
    },
  ],
  password: [
    { required: true, message: "请输入密码", trigger: "blur" },
    {
      pattern: /^[a-zA-Z][0-9a-zA-Z]{7,15}$/,
      message: "8~16位，字母开头，只允许数字和英文",
      trigger: "blur",
    },
  ],
  password4Check: [
    // { required: true, message: "请输入确认密码", trigger: "blur" },
    { validator: validateMessage2, trigger: "blur" },
  ],
  enterprisename: [
    { required: true, message: "请输入企业名称", trigger: "blur" },
  ],
  enterprisenameen: [
    { required: true, message: "请输入企业名称", trigger: "blur" },
    {
      pattern: /^[a-zA-Z]{0,255}$/,
      message: "限制255个字母",
      trigger: "blur",
    },
  ],
  unifynum: [
    { required: true, message: "请输入社会统一信用号", trigger: "blur" },
  ],
  email: [{ required: true, message: "请输入企业邮箱", trigger: "blur" }],

  legalname: [
    { required: true, message: "请输入法人/负责人", trigger: "blur" },
  ],
  papelsnum: [{ required: true, message: "请输入法人身份证", trigger: "blur" }],
  auctioneer: [
    { required: true, message: "请输入拍卖师姓名", trigger: "blur" },
    {
      pattern: /^[\u4E00-\u9FA5A-Za-z]{2,10}$/,
      message: "请输入2~10位，中文或字母",
      trigger: "blur",
    },
  ],
  auctioneerManageNum: [
    { required: true, message: "请输入管理号", trigger: "blur" },
    {
      pattern: /^\d{20}$/,
      message: "请输入20位数字",
      trigger: "blur",
    },
  ],
  auctioneerIdNum: [
    { required: true, message: "请输入证件号", trigger: "blur" },
  ],
  tel: [
    { required: true, message: "请输入手机号", trigger: "blur" },
    // {
    //   pattern: /^\d{20}$/,
    //   message: "请输入20位数字",
    //   trigger: "blur",
    // },
  ],

  verificationCode: [
    { required: true, message: "请输入验证码", trigger: "blur" },
  ],
  licenseimg: [
    { required: true, message: "请上传营业执照", trigger: "change" },
  ],
  papelsupimg: [
    // { required: true, message:"请上传身份证正反面", trigger: "change" },
    { validator: validateMessage, trigger: "blur" },
  ],
  // papelsdownimg:[
  // { required: true, message:"请上传身份证正反面", trigger: "change" },
  // ],
  businessLicenseCertificate: [
    { required: true, message: "请上传经营许可证书", trigger: "change" },
  ],
  auctioneerQualificationCertificate: [
    { required: true, message: "请上传拍卖师资格证", trigger: "change" },
  ],
});

const submitForm = async (formEl: FormInstance | undefined) => {
  console.log(ruleForm);
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      if (!disclaimerAgreement.value) {
        ElMessage.error("未同意免责协议！");
        return false;
      }
      register(ruleForm.value).then((res: any) => {
        console.log(res);
        if (res.code == 0) {
          router.push("/login");
          ElMessage.success(res.msg_cn);
        } else {
          ElMessage.error(res.msg_cn);
        }
      });

      console.log("submit!");
    } else {
      console.log("error submit!", fields);
    }
  });
};

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};

const options = Array.from({ length: 10000 }).map((_, idx) => ({
  value: `${idx + 1}`,
  label: `${idx + 1}`,
}));
//公共方法，图片赋值
function imgPublic(list: any, item: any) {
  var a = <any>[];
  list.forEach((item: any, index: any) => {
    a.push(item.filePath);
  });
  ruleForm.value[item] = a.join(",");
}

//营业执照
const businessLicense = (val: any) => {
  console.log(val, 1111);
  ruleForm.value.licenseimg = "";
  imgPublic(val, "licenseimg");
};
//身份证正面
const cardZheng = (val: any) => {
  console.log(val, 2222);
  ruleForm.value.papelsupimg = "";
  imgPublic(val, "papelsupimg");
};
//身份证反面
const cardFan = (val: any) => {
  console.log(val, 3333);
  ruleForm.value.papelsdownimg = "";
  imgPublic(val, "papelsdownimg");
};
//许可证
const Permit = (val: any) => {
  console.log(val, 3333);
  ruleForm.value.businessLicenseCertificate = "";
  imgPublic(val, "businessLicenseCertificate");
};
//拍卖师资格证
const Auction = (val: any) => {
  console.log(val, 1189);
  ruleForm.value.auctioneerQualificationCertificate = "";
  imgPublic(val, "auctioneerQualificationCertificate");
};
//获取验证码
function getPhoneCode() {
  if (!ruleForm.value.tel) {
    ElMessage.error("请输入手机号");
    return false;
  }
  getCode(ruleForm.value).then((res: any) => {
    if (res.code == 0) {
      var timeCode = setInterval(() => {
        flag.value = true;
        time.value--;
        if (time.value <= 0) {
          flag.value = false;
          time.value = 60;
          clearInterval(timeCode);
        }
      }, 1000);
      ElMessage.success(res.msg_cn);
    } else {
      ElMessage.error(res.msg_cn);
    }
  });
}
</script>

<template>
  <div class="container-bg">
    <div class="login-container flx-center" ref="flexContainer">
      <div class="login-box1">
        <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          :rules="rules"
          label-width="140px"
          class="demo-ruleForm"
          :size="formSize"
        >
          <div class="reg-left">
            <div class="reg-title">合作机构注册</div>

            <el-form-item label="用户名" prop="username">
              <el-input v-model="ruleForm.username" />
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input v-model="ruleForm.password" type="password" />
            </el-form-item>
            <el-form-item label="确认密码" prop="password4Check">
              <el-input v-model="ruleForm.password4Check" type="password" />
            </el-form-item>
            <el-form-item label="企业名称" prop="enterprisename">
              <el-input v-model="ruleForm.enterprisename" />
            </el-form-item>
            <el-form-item label="企业英文名称" prop="enterprisenameen">
              <el-input v-model="ruleForm.enterprisenameen" />
            </el-form-item>
            <el-form-item label="社会统一信用号" prop="unifynum">
              <el-input v-model="ruleForm.unifynum" />
            </el-form-item>
            <el-form-item label="上传营业执照" prop="licenseimg">
              <Upload
                @businessLicense="businessLicense"
                :checkOut="3"
                title="JPG，JPEG，PNG，GIF,上传图片大小不能超过 10MB"
                :formatData="formatDataImg"
                :multiple="true"
                limit="1"
                ref="childComp"
                :width="'40%'"
                :filePathUrl="true"
              ></Upload>
            </el-form-item>
            <el-form-item label="企业邮箱" prop="email">
              <el-input v-model="ruleForm.email" />
            </el-form-item>
            <el-form-item label="法人/负责人" prop="legalname">
              <el-input v-model="ruleForm.legalname" />
            </el-form-item>
            <el-form-item label="法人身份证" prop="papelsnum">
              <el-input v-model="ruleForm.papelsnum" />
            </el-form-item>
          </div>
          <div class="reg-right">
            <el-form-item label="上传身份证信息" prop="papelsupimg">
              <!-- <Upload
                @cardZheng="cardZheng"
                :checkOut="2"
                title="上传身份证正面"
                color="rgba(30, 94, 255, 100);"
              ></Upload> -->
              <div class="cardClass">
                <Upload
                  @cardZheng="cardZheng"
                  :checkOut="3"
                  title="上传身份证正面"
                  :multiple="true"
                  limit="1"
                  ref="childComp"
                  :width="'80%'"
                  btnTrue="no"
                  color="rgb(30, 94, 255)"
                  :filePathUrl="true"
                ></Upload>

                <Upload
                  @cardFan="cardFan"
                  :checkOut="3"
                  title="上传身份证反面"
                  :multiple="true"
                  limit="1"
                  ref="childComp"
                  :width="'80%'"
                  btnTrue="no"
                  color="rgb(30, 94, 255)"
                  :filePathUrl="true"
                ></Upload>
              </div>
              <p class="tip">JPG，JPEG，PNG，GIF,上传图片大小不能超过 10MB</p>
            </el-form-item>
            <el-form-item label="拍卖师姓名" prop="auctioneer">
              <el-input v-model="ruleForm.auctioneer" />
            </el-form-item>
            <el-form-item label="管理号" prop="auctioneerManageNum">
              <el-input v-model="ruleForm.auctioneerManageNum" />
            </el-form-item>
            <el-form-item label="证件号" prop="auctioneerIdNum">
              <el-input v-model="ruleForm.auctioneerIdNum" />
            </el-form-item>
            <el-form-item
              label="经营许可证书"
              prop="businessLicenseCertificate"
            >
              <Upload
                @Permit="Permit"
                :checkOut="3"
                title="JPG，JPEG，PNG，GIF,上传图片大小不能超过 10MB"
                :multiple="true"
                limit="1"
                ref="childComp"
                :width="'40%'"
                :filePathUrl="true"
              ></Upload>

              <!-- <Upload
                @Permit="Permit"
                :checkOut="1"
                title="JPG，JPEG，PNG，GIF,上传图片大小不能超过 10MB"
              ></Upload> -->
            </el-form-item>
            <el-form-item
              label="拍卖师资格证书"
              prop="auctioneerQualificationCertificate"
            >
              <Upload
                @picturesShips="Auction"
                :checkOut="3"
                title="JPG，JPEG，PNG，GIF,上传图片大小不能超过 10MB"
                :multiple="true"
                limit="1"
                ref="childComp"
                :width="'40%'"
                :filePathUrl="true"
              ></Upload>
              <!-- <Upload
                @picturesShips="Auction"
                :checkOut="1"
                title="JPG，JPEG，PNG，GIF,上传图片大小不能超过 10MB"
              ></Upload> -->
            </el-form-item>
            <el-form-item label="手机号" prop="tel">
              <el-input v-model="ruleForm.tel" />
            </el-form-item>
            <el-form-item
              label="验证码"
              prop="verificationCode"
              style="display: flex"
            >
              <el-input v-model="ruleForm.verificationCode" style="flex: 1" />
              <!-- <el-button type="primary" class="yzm" @click="getPhoneCode">获取短信验证码</el-button> -->
              <el-button type="primary" class="yzm" v-if="flag">{{
                time + "s"
              }}</el-button>
              <el-button type="button" class="yzm" v-else @click="getPhoneCode"
                >获取短信验证码</el-button
              >
            </el-form-item>
          </div>
        </el-form>

        <div class="btn">
          <p>
            <el-checkbox
              label="《免责协议》"
              name="type"
              v-model="disclaimerAgreement"
            />
          </p>
          <el-button type="primary" v-preventReClick="2000" @click="submitForm(ruleFormRef)"
            >注册</el-button
          >
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import "@/view/login/index.scss";
@import "./index.scss";
:deep(.el-loading-spinner) {
  top: 35%;
}
</style>
